<!--
 * @Author: LiuYan
 * @Date: 2022-12-16 17:04:36
 * @LastEditors: LiuYan
 * @LastEditTime: 2023-01-13 11:39:23
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en" id="root">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      @import url(../common/css/coommon.css);
    </style>
  </head>
  <body>
    <button id="showEl">显示</button>
    <div id="dialog-content">打发时间浪费撒旦解放了</div>
    <div id="tabs" class="tabs">
      <div class="tab-item">综合</div>
      <div class="tab-item">资料</div>
      <div class="tab-item">需求</div>
      <div class="tab-item">关联</div>
      <div class="tab-item">设计</div>
      <div class="tab-item">进度</div>
    </div>
  </body>
  <script type="module">
    import DiaLog from "../common/js/diaLog.js";
    import Tabs from "../common/js/tabs.js";
    new Tabs({
      tabsEl: "#tabs",
      tabsItemEl: ".tab-item",
      index: 1,
      watch: ({ item, active, index, all, left }) => {
        all.forEach((item) => {
          item.style.color = "#4e5969";
        });
        all[index].style.color = "#3E7BFA";
        active.style.width = "42px";
        const { height, width } = active.getBoundingClientRect();
        active.style.left = left + (item.width - width) / 2 + "px";
        active.style.top = item.height - height + "px";
      },
    });
    let dialog = new DiaLog({
      title: "新建项目",
      width: "543px",
      el: "#dialog-content",
      cancelText: "取消",
      confirmText: "确定",
      isShowFooter: true,
      closed: () => {
        console.log("关闭");
      },
      cancel: () => {
        console.log("取消");
        dialog.hide();
      },
      confirm: () => {
        console.log("确定");
        dialog.hide();
        dialog.clear();
      },
    });
    document.querySelector("#showEl").addEventListener("click", () => {
      dialog.show();
    });
  </script>
</html>
